<template>
  <div class="container shadow" v-if="column">
    <img :src="column.avatar.url" class="left">
    <div class="right">
      <div  class="up">{{column.title}}</div>
      <div class="down">{{column.content}}</div>
    </div>
  </div>
  <post-list :list="list"></post-list>
  <!-- 这里是在在渲染对应的id号的文章，以及一个专栏对应多个文章 -->
</template>

<script lang='ts'>
import { defineComponent, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import PostList from './PostList.vue'
import { GlobalDataProps } from '../store'
export default defineComponent({
  components: { PostList },
  name: 'ColumnDetail',
  setup () {
    const route = useRoute()
    const store = useStore<GlobalDataProps>()
    const currentId = route.params.id
    onMounted(() => {
      store.dispatch('fetchColumn', currentId)
      store.dispatch('fetchPosts', currentId)
    })
    const column = computed(() => store.getters.getColumnByid(currentId))
    const list = computed(() => store.getters.getPostsBycid(currentId))
    return {
      column,
      list
    }
  }
})
</script>

<style>
.container img{
  height: 100px;
  widows: 100px;
}
</style>
